<script setup></script>

<template>
  <div class="right">
    <div class="title bg1">
      <img src="../../../assets/images/detail.png" class="detailArrow" />
    </div>
    <div class="box">
      <div class="box-c op">
        <div class="box-c-c1">
          <img src="../../../assets/images/city.png" class="icon1" />
          <span>教师入职服务</span>
          <img src="../../../assets/images/aiBtn.png" class="icon2" />
        </div>
        <div class="box-c-c2">
          <div class="box-c-c2-c">
            <span class="box-c-c2-c-c1">2024年招聘专任教师</span>
            <div class="box-c-c2-c-l"></div>
            <div class="box-c-c2-c-c2">
              <span class="box-c-c2-c-c2-c1">25121</span>
              <span class="box-c-c2-c-c2-c2">人</span>
            </div>
          </div>
          <img src="../../../assets/images/arrow1.png" class="arrow pos1" />
          <div class="box-c-c2-c">
            <span class="box-c-c2-c-c1">专任教师数量</span>
            <div class="box-c-c2-c-l"></div>
            <div class="box-c-c2-c-c2 flex justify-between">
              <div>
                <span class="box-c-c2-c-c2-c1">405237</span>
                <span class="box-c-c2-c-c2-c2">人</span>
              </div>
              <!-- <div class="flex flex-col">
                <span class="box-c-c2-c-c2-c2">处置次数</span>
                <span class="box-c-c2-c-c2-c2">---</span>
              </div> -->
            </div>
          </div>
          <img src="../../../assets/images/arrow1.png" class="arrow pos2" />
          <div class="box-c-c2-c">
            <span class="box-c-c2-c-c1">普通本科专任教师博士学位占比</span>
            <div class="box-c-c2-c-l"></div>
            <div class="box-c-c2-c-c2">
              <span class="box-c-c2-c-c2-c1">43.62%</span>
              <!-- <span class="box-c-c2-c-c2-c2">人</span> -->
            </div>
          </div>
          <img src="../../../assets/images/arrow1.png" class="arrow pos3" />
          <div class="box-c-c2-c">
            <span class="box-c-c2-c-c1">--</span>
            <div class="box-c-c2-c-l"></div>
            <div class="box-c-c2-c-c2">
              <span class="box-c-c2-c-c2-c1">--</span>
              <span class="box-c-c2-c-c2-c2"></span>
            </div>
          </div>
        </div>
      </div>

      <div class="box-c box-bg op">
        <div class="box-c-c1">
          <img src="../../../assets/images/city.png" class="icon1" />
          <span>教师专业成长</span>
          <img src="../../../assets/images/aiBtn.png" class="icon2" />
        </div>
        <div class="box-c-c2">
          <div class="box-c-c2-c">
            <span class="box-c-c2-c-c1">2024年新认定教师资格数</span>
            <div class="box-c-c2-c-l"></div>
            <div class="box-c-c2-c-c2">
              <span class="box-c-c2-c-c2-c1">46707</span>
              <span class="box-c-c2-c-c2-c2">人</span>
            </div>
          </div>
          <img src="../../../assets/images/arrow1.png" class="arrow pos1" />
          <div class="box-c-c2-c">
            <span class="box-c-c2-c-c1">省部级以上人才数</span>
            <div class="box-c-c2-c-l"></div>
            <div class="box-c-c2-c-c2">
              <span class="box-c-c2-c-c2-c1">27031</span>
              <span class="box-c-c2-c-c2-c2">人</span>
            </div>
          </div>
          <img src="../../../assets/images/arrow1.png" class="arrow pos2" />
          <div class="box-c-c2-c">
            <span class="box-c-c2-c-c1">市级高校黄大年式教育团队</span>
            <div class="box-c-c2-c-l"></div>
            <div class="box-c-c2-c-c2">
              <span class="box-c-c2-c-c2-c1">92</span>
              <span class="box-c-c2-c-c2-c2">个</span>
            </div>
          </div>
          <img src="../../../assets/images/arrow1.png" class="arrow pos3" />
          <div class="box-c-c2-c">
            <span class="box-c-c2-c-c1">2024年教师培训人次</span>
            <div class="box-c-c2-c-l"></div>
            <div class="box-c-c2-c-c2">
              <span class="box-c-c2-c-c2-c1">--</span>
              <span class="box-c-c2-c-c2-c2">人次</span>
            </div>
          </div>
        </div>
      </div>

      <div class="box-c op">
        <div class="box-c-c1">
          <img src="../../../assets/images/county.png" class="icon1" />
          <span>教师能力认定</span>
          <!-- <img src="../../../assets/images/aiBtn.png" class="icon2" /> -->
        </div>
        <div class="box-c-c2">
          <div class="box-c-c2-c">
            <span class="box-c-c2-c-c1">职称申报评审人次</span>
            <div class="box-c-c2-c-l"></div>
            <div class="box-c-c2-c-c2">
              <span class="box-c-c2-c-c2-c1">--</span>
              <span class="box-c-c2-c-c2-c2">人</span>
            </div>
          </div>
          <img src="../../../assets/images/arrow2.png" class="arrow pos1" />
          <div class="box-c-c2-c">
            <span class="box-c-c2-c-c1">职称申报批复人次</span>
            <div class="box-c-c2-c-l"></div>
            <div class="box-c-c2-c-c2">
              <span class="box-c-c2-c-c2-c1">--</span>
              <span class="box-c-c2-c-c2-c2">人</span>
            </div>
          </div>
          <img src="../../../assets/images/arrow2.png" class="arrow pos2" />
          <div class="box-c-c2-c">
            <span class="box-c-c2-c-c1">教师评价人次</span>
            <div class="box-c-c2-c-l"></div>
            <div class="box-c-c2-c-c2">
              <span class="box-c-c2-c-c2-c1">--</span>
              <span class="box-c-c2-c-c2-c2">人</span>
            </div>
          </div>
          <img src="../../../assets/images/arrow2.png" class="arrow pos3" />
          <div class="box-c-c2-c">
            <span class="box-c-c2-c-c1">问题整改次数</span>
            <div class="box-c-c2-c-l"></div>
            <div class="box-c-c2-c-c2">
              <span class="box-c-c2-c-c2-c1">--</span>
              <span class="box-c-c2-c-c2-c2">次</span>
            </div>
          </div>
        </div>
      </div>

      <div class="box-c box-bg op">
        <div class="box-c-c1">
          <img src="../../../assets/images/school.png" class="icon1" />
          <span>教师信用服务</span>
          <img src="../../../assets/images/aiBtn.png" class="icon2" />
        </div>
        <div class="box-c-c2">
          <div class="box-c-c2-c">
            <span class="box-c-c2-c-c1" title="市级师德师风教育实践基地"
              >市级师德师风教育实践基地</span
            >
            <div class="box-c-c2-c-l"></div>
            <div class="box-c-c2-c-c2">
              <span class="box-c-c2-c-c2-c1">3</span>
              <span class="box-c-c2-c-c2-c2">个</span>
            </div>
          </div>
          <img src="../../../assets/images/arrow3.png" class="arrow pos1" />
          <div class="box-c-c2-c">
            <span class="box-c-c2-c-c1">国家级中等职业教育教师创新团队</span>
            <div class="box-c-c2-c-l"></div>
            <div class="box-c-c2-c-c2">
              <span class="box-c-c2-c-c2-c1">7</span>
              <span class="box-c-c2-c-c2-c2">个</span>
            </div>
          </div>
          <img src="../../../assets/images/arrow3.png" class="arrow pos2" />
          <div class="box-c-c2-c">
            <span class="box-c-c2-c-c1">市级职业教育教师创新团队</span>
            <div class="box-c-c2-c-l"></div>
            <div class="box-c-c2-c-c2">
              <span class="box-c-c2-c-c2-c1">20</span>
              <span class="box-c-c2-c-c2-c2">个</span>
            </div>
          </div>
          <img src="../../../assets/images/arrow3.png" class="arrow pos3" />
          <div class="box-c-c2-c">
            <span class="box-c-c2-c-c1">先进集体</span>
            <div class="box-c-c2-c-l"></div>
            <div class="box-c-c2-c-c2">
              <span class="box-c-c2-c-c2-c1">16</span>
              <span class="box-c-c2-c-c2-c2">个</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="title bg2">
      <img src="../../../assets/images/detail.png" class="detailArrow" />
    </div>
    <div class="box">
      <div class="box-c op">
        <div class="box-c-c1">
          <img src="../../../assets/images/city.png" class="icon1" />
          <span>产教结构匹配</span>
          <img src="../../../assets/images/aiBtn.png" class="icon2" />
        </div>
        <div class="box-c-c2">
          <div class="box-c-c2-c">
            <span class="box-c-c2-c-c1">社区教育办学体系全覆盖</span>
            <div class="box-c-c2-c-l"></div>
            <div class="box-c-c2-c-c2">
              <span class="box-c-c2-c-c2-c1">81%</span>
              <!-- <span class="box-c-c2-c-c2-c2">人</span> -->
            </div>
          </div>
          <img src="../../../assets/images/arrow1.png" class="arrow pos1" />
          <div class="box-c-c2-c">
            <span class="box-c-c2-c-c1">产教融合平台数</span>
            <div class="box-c-c2-c-l"></div>
            <div class="box-c-c2-c-c2">
              <span class="box-c-c2-c-c2-c1">137</span>
              <span class="box-c-c2-c-c2-c2">个</span>
            </div>
          </div>
          <img src="../../../assets/images/arrow1.png" class="arrow pos2" />
          <div class="box-c-c2-c">
            <span class="box-c-c2-c-c1">新型学校(基地)</span>
            <div class="box-c-c2-c-l"></div>
            <div class="box-c-c2-c-c2">
              <span class="box-c-c2-c-c2-c1">41</span>
              <span class="box-c-c2-c-c2-c2">个</span>
            </div>
          </div>
          <img src="../../../assets/images/arrow1.png" class="arrow pos3" />
          <div class="box-c-c2-c">
            <span class="box-c-c2-c-c1">社区教育办学体系四级机构数</span>
            <div class="box-c-c2-c-l"></div>
            <div class="box-c-c2-c-c2">
              <span class="box-c-c2-c-c2-c1">11183</span>
              <span class="box-c-c2-c-c2-c2">个</span>
            </div>
          </div>
        </div>
      </div>

      <div class="box-c box-bg op">
        <div class="box-c-c1">
          <img src="../../../assets/images/city.png" class="icon1" />
          <span>产教协同育人</span>
          <img src="../../../assets/images/aiBtn.png" class="icon2" />
        </div>
        <div class="box-c-c2">
          <div class="box-c-c2-c">
            <span class="box-c-c2-c-c1">产教协同育人平台</span>
            <div class="box-c-c2-c-l"></div>
            <div class="box-c-c2-c-c2">
              <span class="box-c-c2-c-c2-c1">55</span>
              <span class="box-c-c2-c-c2-c2">个</span>
            </div>
          </div>
          <img src="../../../assets/images/arrow1.png" class="arrow pos1" />
          <div class="box-c-c2-c">
            <span class="box-c-c2-c-c1">开发课程数</span>
            <div class="box-c-c2-c-l"></div>
            <div class="box-c-c2-c-c2">
              <span class="box-c-c2-c-c2-c1">--</span>
              <span class="box-c-c2-c-c2-c2">个</span>
            </div>
          </div>
          <img src="../../../assets/images/arrow1.png" class="arrow pos2" />
          <div class="box-c-c2-c">
            <span class="box-c-c2-c-c1">新编程教材数</span>
            <div class="box-c-c2-c-l"></div>
            <div class="box-c-c2-c-c2">
              <span class="box-c-c2-c-c2-c1">--</span>
              <span class="box-c-c2-c-c2-c2">个</span>
            </div>
          </div>
          <img src="../../../assets/images/arrow1.png" class="arrow pos3" />
          <div class="box-c-c2-c">
            <span class="box-c-c2-c-c1">双师双能教师数</span>
            <div class="box-c-c2-c-l"></div>
            <div class="box-c-c2-c-c2">
              <span class="box-c-c2-c-c2-c1">--</span>
              <span class="box-c-c2-c-c2-c2">个</span>
            </div>
          </div>
        </div>
      </div>

      <div class="box-c op">
        <div class="box-c-c1">
          <img src="../../../assets/images/county.png" class="icon1" />
          <span>培训机构监管</span>
          <!-- <img src="../../../assets/images/aiBtn.png" class="icon2" /> -->
        </div>
        <div class="box-c-c2">
          <div class="box-c-c2-c">
            <span class="box-c-c2-c-c1">运营机构</span>
            <div class="box-c-c2-c-l"></div>
            <div class="box-c-c2-c-c2">
              <span class="box-c-c2-c-c2-c1">2381</span>
              <span class="box-c-c2-c-c2-c2">个</span>
            </div>
          </div>
          <img src="../../../assets/images/arrow2.png" class="arrow pos1" />
          <div class="box-c-c2-c">
            <span class="box-c-c2-c-c1">风险预警处置率</span>
            <div class="box-c-c2-c-l"></div>
            <div class="box-c-c2-c-c2">
              <span class="box-c-c2-c-c2-c1">95.01%</span>
              <!-- <span class="box-c-c2-c-c2-c2">个</span> -->
            </div>
          </div>
          <img src="../../../assets/images/arrow2.png" class="arrow pos2" />
          <div class="box-c-c2-c">
            <span class="box-c-c2-c-c1">机构审批率</span>
            <div class="box-c-c2-c-l"></div>
            <div class="box-c-c2-c-c2">
              <span class="box-c-c2-c-c2-c1">96%</span>
              <!-- <span class="box-c-c2-c-c2-c2">次</span> -->
            </div>
          </div>
          <img src="../../../assets/images/arrow2.png" class="arrow pos3" />
          <div class="box-c-c2-c">
            <span class="box-c-c2-c-c1">核查处置工单</span>
            <div class="box-c-c2-c-l"></div>
            <div class="box-c-c2-c-c2">
              <span class="box-c-c2-c-c2-c1">15</span>
              <span class="box-c-c2-c-c2-c2">件</span>
            </div>
          </div>
        </div>
      </div>

      <div class="box-c box-bg op">
        <div class="box-c-c1">
          <img src="../../../assets/images/school.png" class="icon1" />
          <span>产教人才适配</span>
          <img src="../../../assets/images/aiBtn.png" class="icon2" />
        </div>
        <div class="box-c-c2">
          <div class="box-c-c2-c">
            <span class="box-c-c2-c-c1">招聘会数</span>
            <div class="box-c-c2-c-l"></div>
            <div class="box-c-c2-c-c2">
              <span class="box-c-c2-c-c2-c1">381</span>
              <span class="box-c-c2-c-c2-c2">个</span>
            </div>
          </div>

          <img src="../../../assets/images/arrow3.png" class="arrow pos2" />
          <div class="box-c-c2-c">
            <span class="box-c-c2-c-c1">学校邀请单位数</span>
            <div class="box-c-c2-c-l"></div>
            <div class="box-c-c2-c-c2">
              <span class="box-c-c2-c-c2-c1">8743</span>
              <span class="box-c-c2-c-c2-c2">个</span>
            </div>
          </div>
          <img src="../../../assets/images/arrow3.png" class="arrow pos3" />
          <div class="box-c-c2-c">
            <span class="box-c-c2-c-c1">制造业人才供需比例</span>
            <div class="box-c-c2-c-l"></div>
            <div class="box-c-c2-c-c2">
              <span class="box-c-c2-c-c2-c1">53%</span>
              <!-- <span class="box-c-c2-c-c2-c2">人</span> -->
            </div>
          </div>
          <img src="../../../assets/images/arrow3.png" class="arrow pos1" />
          <div class="box-c-c2-c">
            <span class="box-c-c2-c-c1">宣讲会</span>
            <div class="box-c-c2-c-l"></div>
            <div class="box-c-c2-c-c2">
              <span class="box-c-c2-c-c2-c1">4453</span>
              <span class="box-c-c2-c-c2-c2">个</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.right {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  .title {
    width: 100%;
    height: 2.75rem;
    display: flex;
    align-items: center;
    position: relative;
    .detailArrow {
      width: 21px;
      height: 18px;
      position: absolute;
      right: 12px;
      cursor: pointer;
    }
  }
  .bg1 {
    background: url(../../../assets/images/title3.png) no-repeat;
    background-size: 100% 100%;
  }
  .bg2 {
    background: url("../../../assets/images/title4.png") no-repeat;
    background-size: 100% 100%;
  }

  .box {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    .box-c {
      width: 100%;
      flex: 1;
      background: rgba(9, 54, 100, 0.5);
      padding: 8px 12px 0;
      display: flex;
      flex-direction: column;
      // justify-content: center;
      gap: 6px;
      .box-c-c1 {
        display: flex;
        align-items: center;
        gap: 6px;
        font-family: "Alibaba PuHuiTi 2.0-85 Bold";
        font-size: 16px;
        color: #c9e9f8;
      }
      .box-c-c2 {
        display: flex;
        gap: 29px;
        position: relative;
        .box-c-c2-c {
          min-width: 108px;
          display: flex;
          flex-direction: column;
          gap: 8px;
          .box-c-c2-c-c1 {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            font-family: "Alibaba PuHuiTi 2.0-65 Medium";
            font-size: 12px;
            color: #c9e9f8;
            line-height: 12px;
          }
          .box-c-c2-c-l {
            width: 60px;
            border-radius: 0px 0px 0px 0px;
            border: 1px solid;
            border-image: linear-gradient(
                90deg,
                rgba(201, 233, 248, 0.4),
                rgba(201, 233, 248, 0)
              )
              1 1;
          }
          .box-c-c2-c-c2 {
            // display: flex;
            // align-items: end;
            // justify-content: space-between;
            // gap: 2px;
            .box-c-c2-c-c2-c1 {
              font-family: "Helvetica-Bold";
              font-weight: bold;
              font-size: 20px;
              color: #ffffff;
              line-height: 20px;
            }
            .box-c-c2-c-c2-c2 {
              font-family: "Alibaba PuHuiTi 2.0-55 Regular";
              font-size: 10px;
              color: rgba(201, 233, 248, 0.8);
              margin-left: 2px;
            }
          }
        }
      }
    }
  }
  .box-bg {
    background: rgba(9, 54, 100, 0) !important;
  }
  .op {
    opacity: 0.6;
  }

  .pos1 {
    position: absolute;
    left: 93px;
    top: 10px;
  }
  .pos2 {
    position: absolute;
    left: 230px;
    top: 10px;
  }
  .pos3 {
    position: absolute;
    left: 367px;
    top: 10px;
  }
  .arrow {
    width: 44px;
    height: 28px;
  }

  .icon1 {
    width: 20px;
    height: 20px;
  }
  .icon2 {
    width: 36px;
    height: 18px;
  }
}
</style>
